﻿<%@ Page Title="" Language="C#" MasterPageFile="~/TitleLayout.master" %>

<%@ Register Src="~/CodeFormatter.ascx" TagName="Code" TagPrefix="demo" %>

<script runat="server">

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="LeftContent" runat="Server">
    <div style="margin-bottom: 10px;">
        <asp:Image ID="Image3" runat="server" ImageUrl="~/Draggable/Images/ui_text_draggable.gif">
        </asp:Image></div>
    <DotNetAge:Accordion ID="Accordion1" runat="server" SkinID="Black-Ice" Animated="bounceslide">
        <Views>
            <DotNetAge:NavView ID="Nav1" runat="server" Text="Feature Examples" Target="demoFrame">
                <Items>
                    <DotNetAge:NavItem Text="Core Features" NavigateUrl="~/Draggable/Core.aspx" />
                    <DotNetAge:NavItem Text="Handling client events" NavigateUrl="~/Draggable/Events.aspx" />
                    <DotNetAge:NavItem Text="Constrain movement" NavigateUrl="~/Draggable/ConstrainMovement.aspx" />
                    <DotNetAge:NavItem Text="Delay Start" NavigateUrl="~/Draggable/DelayStart.aspx" />
                    <DotNetAge:NavItem Text="Snap to control or grid" NavigateUrl="~/Draggable/Snap.aspx" />
                    <DotNetAge:NavItem Text="Auto-scroll" NavigateUrl="~/Draggable/AutoScroll.aspx" />
                    <DotNetAge:NavItem Text="Revert position" NavigateUrl="~/Draggable/Revert.aspx" />
                    <DotNetAge:NavItem Text="Drag helper" NavigateUrl="~/Draggable/Helpers.aspx" />
                    <DotNetAge:NavItem Text="Drag Handle" NavigateUrl="~/Draggable/DragHandle.aspx" />
                    <DotNetAge:NavItem Text="Cursor style" NavigateUrl="~/Draggable/CursorStyle.aspx" />
                    <DotNetAge:NavItem Text="Draggable + Sortable" NavigateUrl="~/Draggable/DraggableSortable.aspx" />
                    <DotNetAge:NavItem Text="Programmatic creation" NavigateUrl="~/Draggable/ProgrammaticCreation.aspx" />
                </Items>
            </DotNetAge:NavView>
        </Views>
    </DotNetAge:Accordion>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MiddleContent" runat="Server">
    <iframe frameborder="0" style="height: 580px; width: 100%" name="demoFrame" scrolling="no"
        src="Core.aspx"></iframe>
    <DotNetAge:Tabs runat="server" ID="HelpTab">
        <Animations>
            <DotNetAge:AnimationAttribute AnimationType="opacity" Value="toggle" />
            <DotNetAge:AnimationAttribute AnimationType="height" Value="toggle" />
        </Animations>
        <Views>
            <DotNetAge:View runat="server" ID="overView" Text="Overview">
                <p>
                    Draggable is a ASP.NET WebControl that encapsulat the jQuery UI drappable plugin.Draggable
                    Web Control implement all functions of jQuery UI droppable plugin,it makes selected
                    any WebControls or HTML elements draggable by mouse.
                </p>
                <p>
                    Draggable can apply to more than one WebControls and Html Elements at the same time.</p>
                <p>
                    You can specify which (individually) or which kind of draggables each will accept.
                    All ClientEvents (OnClient... properties)receive two arguments(it's same of jQuery
                    droppable callbacks): The original browser event and a prepared ui object, view
                    below for a documentation of this object (if you name your second argument 'ui'):
                </p>
                <ul>
                    <li>ui.draggable - current draggable element, a jQuery object.</li>
                    <li>ui.helper - current draggable helper, a jQuery object</li>
                    <li>ui.position - current position of the draggable helper { top: , left: }</li>
                    <li>ui.offset - current absolute position of the draggable helper { top: ,left: }</li>
            </DotNetAge:View>
            <DotNetAge:View runat="server" ID="propertyView" Text="Properties">
                <p>
                    The control above is initialized with this code</p>
                <div style="border: 1px dashed #808080;">
                    <demo:Code runat="server" ID="quickDemo">
                        <CodeTemplate>
<DotNetAge:Draggable ID="MyDraggable"
        AllowAddClasses="true" 
        AllowSnap="true"
        AutoScroll="true" 
        Container="Parent" 
        Cursor="pointer" 
        DragGroupMinZIndex="1000"
        DragGroupName="myDragGroup" 
        DragHelper="Clone" 
        DragHelperOpacity="0.7" 
        DragStartDelay="1000"
        DragStartDistance="20" 
        OnClientDrag="client script here" 
        OnClientDragStart="..."
        OnClientDragStop="..." 
        DragOrientation="Both" 
        PreventiFrameCapturingMouseEvents="true"
        RefreshPositions="true" 
        Revert="Auto" 
        RevertDuration="1000" 
        ScrollSensitivity="100"
        ScrollSpeed="100"
        SnapMode="Both" 
        SnapOffset="0" 
        SnapX="20"
        SnapY="20" 
        ZIndex="1000">
        <CustomHelperTemplate>
                <div>custom helper</div>
        </CustomHelperTemplate>
        <CursorPosition Left="0px" Top="0px" Right="0px" Bottom="0px" />
        <Target TargetIDs="ControlID1, ... ,ControlIDn" 
                     Selector=".ui-widget-header" TargetID="ControlID" />
        <ConnectToSortable />
        <ContainsIn />
        <DisableDraggingElements />
        <DragHandler />
        <SnapTo />
</DotNetAge:Draggable> 
</CodeTemplate>
 </demo:Code>
  </div>
   </DotNetAge:View> 
</Views>
</DotNetAge:Tabs> 
</asp:Content> 